date: 2024-04-08
Type: Cours
Projet: Blindcode
Cours: PHP

Projet récapitulatif procédural en Solo

Header :

Nous avons maintenant abordé tous les points que je pouvais aborder avec le nombre d'heures qui nous étaient donné et qui me semblait le plus important pour que vous ayez une maîtrise de la programmation basique. Cependant, cette approche, même si vitale pour la suite du cours, n'est pas encore la manière de coder moderne et compétitive, cela, on le garde pour les heures qu'il nous reste. Mais avant ça, nous allons nous attaquer à un gros exercice récapitulatif de la matière vue depuis le début de l'année. Réussir ce projet est une bonne manière de voir si vous maîtrisez les aspects important de la programmation web. Si vous rencontrez des difficulté lors de la réalisation de cet exercice, je vous invite à prendre note de ceci, et de travailler les points notés seul, en groupe, ou accompagné par un formateur. Au menu :

Html
Css (bootstrap si vous le souhaitez !)
SQL
Algorithmie de PHP
Communication entre le front-end et la base de donnée en PHP
Javascript si vous le souhaitez

Pour ce projet en particulier, je vous demande de vous en tenir à ça, pour le projet final, je ne vous interdirai pas d'utiliser toutes les technos que vous voulez, mais ici, contentez vous de ce qui a été vu au cours, et uniquement cela.
C'est un entrainement pour le projet final, donc jouez le jeu à fond !

Body

Préparation

Travail seul
Un depot Github par personne
Une base de donnée pour le projet
Une architecture de dossier et fichier pour que ça soit clair (Css séparé, dossier de ressources(images, vidéos,...), Script à part, etc)

Temps de travail en cours

Une journée de 9h à 16h.
Sera corrigé la version du projet pushée à 15h59 maximum
Si le dépot Github n'est pas fait, cela sera compté dans la note, mais le projet doit être rendu à 15h59 au plus tard en .zip le cas échéant par mail.

Projet

Le Sujet du projet est libre mais doit porter sur un thème pouvant regrouper plusieurs entrées assez facilement, par exemple : "Les films", "les jeux vidéos", "Les acteurs". Prenez un thème générique pour ne pas perdre de temps avec cet aspect, le but est de coder !

le projet est composé de 2 pages Minimum !

En commun sur les deux pages

Au minimum :

Un header avec le nom de votre site et une image de bannière centrée.
Une navbar permettant d'accéder aux différentes pages du site.
Un footer reprenant des informations sur vous, créateur du site, une note de copyright.
Attention à respecter les règles d'accessibilité ! (skip to content, ...)

Première page obligatoire

Un champs de formulaire unique.
Un bouton de soumission du formulaire

Deuxième page obligatoire

Une liste à puce

Les fonctionnalités

Sur la page de formulaire

Votre champ unique prendra une chaîne de caractère comprise entre 2 et 50 caractères, cette chaîne sera envoyé en base de donnée et stockée dans un champ correspondant. Si on envoie plusieurs fois le formulaire, chaque nouvel envoi crée une nouvelle donnée dans cette base de donnée si elle n'existe pas déjà.

Sur la page de listing

Toutes les données stockées en base de données sont affichée dans une liste à puce.

Nice to Have

Essayez de rendre votre site sexy dans le thème choisi (Bootsrap+Css)
Essayez de créer en plus de ça une ou plusieurs pages à votre site qui sont pertinente (page d'accueil, formulaire de contact, à propos,...)
Faite de votre page de formulaire un envoi de plusieurs données dans la base de donnée à l'aide de plusieurs champs
Customisez vos listing en fonctions des champs de votre formulaire si vous en avez rajouté
Ajoutez des scripts JS pour la sécurité ou des petites fonctionnalité (bouton de retour en haut de la page, ...)

Exemple

1) Obligatoire (2h sans les visuels)

Je crée un dépot git
Je crée un projet PHP dans le dépot que j'ai créé
Je choisi comme thème Les films.
Dans mon formulaire, je peux entrer des noms de films (form.php)
Ma page de liste écrit dans une liste les films inscrit dans la base de données, exemple : (list.php)
- Titanic
- Jurassic Park
- Taxi 2
Je retourne sur la page de formulaire, j'écris dans le champs "Gravity", j'appuie sur le bouton d'envoi du formulaire
Je retourne sur la page de liste, maintenant elle ressemble à ceci :
- Titanic
- Jurassic Park
- Taxi 2
- Gravity
Je crée header.php, footer.php et navbar.php, je crée ma banière, mon footer et ma navbar séparément dans chaque fichier
J'include mes 3 éléments aux bons emplacements dans mes 2 pages.
Je veille à l'accessibilité de tout ce que j'ai créé

2) Nice to Have : Amélioration visuelle (1h maximum, ne pas perdre trop de temps sur des détails, l'important est de montrer qu'on sait se servir de CSS et Bootstrap, pas que ça soit une oeuvre d'art)

Une fois mes différents aspects obligatoires développés, j'attaque le visuel.
Je crée un header.css, un footer.css, un navbar.css, un form.css, un list.css et un général.css
Je repasse dans mes 5 fichiers pour faire les améliorations visuelles que je veux.

3) Nice to Have : Datation

Je rajoute un champ de formulaire dans form.php qui prend maintenant les dates de sortie des films
Lors de l'affichage dans list.php, ils s'affichent dans leur date de sortie.

4) Nice to Have : Catégorie

Je rajoute un champs sur le thème du film (la liste déroulante peut être un choix intéressant si tu gères !)
Sur la page listing, cette fois, les films sont affichés avec leurs thème avant et une petite image. Ex : Une image de indiana Jones, suivi du titre Aventure, s'en suit la liste des films taggé aventure dans la base de données, ensuite, une image du film titanic suivi du titre drame suivi des films taggé comme drame, etc.
Bien sûr, au sein des catégorie, les films sont trié par date de sortie si vous avez déjà développé le NTH3.

5) Nice to Have : Les pages de plus

Je crée mes pages index.php, contact.php, j'y ajoute mes différents include.
Sur ma page d'accueil, je travaille un petit speech de présentation de mon site
Sur ma page contact, je fais un petit formulaire de contact, lorsque je l'envoie, ça envoie un mail à l'administrateur avec les informations récoltées dans le formulaire.

6) Nice to Have : Les scripts

A l'aide un petit script, je fais un bouton dark mode qui change les textes en blanc et les fonds en noir.
A l'aide d'un petit script, je vérifie tous les champs de formulaires pour que les données soient correct à l'envoi du formulaire, si non, j'en alerte l'utilisateur avec des messages d'erreur.